<template>
  <div class="container">
    <!-- 登录 -->
    <div v-if="!isRegister" class="login-box">
      <h1>登录</h1>
      <el-form @submit.native.prevent="handleLogin">
        <el-input v-model="form.username" type="text" placeholder="请输入用户名" />
        <el-input v-model="form.password" type="password" placeholder="请输入密码" />
        <el-button type="primary" @click="handleLogin">登录</el-button>
        <el-link type="danger" style="margin-left: 40px" @click="toggleForm">
          没有账号?立即注册
        </el-link>
      </el-form>
    </div>
    <!-- 注册 -->
    <div v-else class="register-box">
      <h1>注册</h1>
      <el-form @submit.native.prevent="handleRegister">
        <el-input v-model="form.username" type="text" placeholder="请输入用户名" />
        <el-input v-model="form.password" type="password" placeholder="请输入密码" />
        <el-input v-model="form.age" type="number" placeholder="请输入年龄" />
        <el-select v-model="form.gender" placeholder="请选择性别">
          <el-option label="男" value="male"></el-option>
          <el-option label="女" value="female"></el-option>
        </el-select>
        <el-input v-model="form.email" type="email" placeholder="请输入邮箱" />
        <el-input v-model="form.phone" type="tel" placeholder="请输入电话" />
        <el-button type="primary" @click="handleRegister">注册</el-button>
        <el-link type="danger" style="margin-left: 40px" @click="toggleForm">
          已有账号?立即登录
        </el-link>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 初始化 form 数据
const form = ref({
  username: '',
  password: '',
  age: null,
  gender: '',
  email: '',
  phone: '',
})

const isRegister = ref(false)

// 登录处理
const handleLogin = () => {
  if (!form.value.username || !form.value.password) {
    console.log('请填写用户名和密码！')
    return
  }
  console.log('登录信息:', form.value)
  // 模拟登录成功，跳转到 home 页面
  router.push({ name: 'home' })
}

// 注册处理
const handleRegister = () => {
  if (!form.value.username || !form.value.password || !form.value.email) {
    console.log('请填写完整的注册信息！')
    return
  }
  console.log('注册信息:', form.value)
}

// 切换表单
const toggleForm = () => {
  isRegister.value = !isRegister.value
}
</script>

<style scoped>
.login-box,
.register-box {
  width: 350px;
  margin: 200px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.el-input,
.el-select {
  margin-bottom: 20px;
}
</style>
